<!--
 * @Author: Meow
 * @Date: 2019-11-20 10:13:16
 * @LastEditors: Meow
 * @LastEditTime: 2019-11-21 21:03:18
 * @Description: 添加流程节点弹出层[查询/修改]
 -->
<template>
  <div id="Tabs" v-loading="loading">
    <el-tabs v-model="activeName" type="card">
      <el-tab-pane label="基本信息" name="first">
        <!-- tabs1:基本信息↓ -->
        <el-form :model="formData.skyBusiProceNodes[0]" label-width="100px">
          <el-form-item label="节点名称：">
            <el-input :disabled="NodeDisabled" v-model="formData.skyBusiProceNodes[0].nodeName"></el-input>
          </el-form-item>
          <el-form-item label="业务密级：">
            <el-select :disabled="NodeDisabled" v-model="formData.skyBusiProceNodes[0].secretLevel" placeholder="请选择">
              <el-option v-for="item in Options1" :key="item.dictName" :label="item.dictName" :value="item.dictName"></el-option>
            </el-select>
            <!-- <el-input  :disabled="NodeDisabled"   v-model="formData.skyBusiProceNodes[0].secretLevel"></el-input> -->
          </el-form-item>
          <el-form-item label="节点类型：">
            <el-select :disabled="NodeDisabled" v-model="formData.skyBusiProceNodes[0].nodeType" placeholder="请选择">
              <el-option v-for="item in Options2" :key="item.name" :label="item.name" :value="item.name"></el-option>
            </el-select>
            <!-- <el-input  :disabled="NodeDisabled"   v-model="formData.skyBusiProceNodes[0].nodeType"></el-input> -->
          </el-form-item>
          <el-form-item label="业务边界：">
            <el-input :disabled="NodeDisabled" v-model="formData.skyBusiProceNodes[0].businessBoundary"></el-input>
          </el-form-item>
          <el-form-item label="标签：">
            <treeselect :disabled="NodeDisabled" :multiple="true" :options="queryLabelTree" :flat="true" :default-expand-level="1" :normalizer="_normalizer" placeholder="选择标签"
              noOptionsText="暂无数据" noResultsText="没有找到匹配结果" noChildrenText="没有子节点" v-model="formData.skyBusiProceNodes[0].label" />
            <!-- <el-input  :disabled="NodeDisabled"   v-model="formData.skyBusiProceNodes[0].label"></el-input> -->
          </el-form-item>
        </el-form>
        <!-- tabs1:基本信息↑ -->
      </el-tab-pane>
      <!-- tabs2:执行单位 ↓-->
      <el-tab-pane label="执行单位" name="second">
        <div v-if="!NodeDisabled" class="add-box">
          <el-button size="mini" type="primary" @click="add1">添加</el-button>
        </div>
        <el-table :data="formData.skyBusiExecDepartments" :header-cell-style="tableStyle" border>
          <el-table-column prop="unitName" label="单位名称" align="center"></el-table-column>
          <el-table-column prop="execOffice" label="执行处室" align="center"></el-table-column>
          <el-table-column v-if="!NodeDisabled" label="操作" align="center" min-width="150">
            <template slot-scope="scope">
              <el-button size="mini" type="primary" @click="up1(scope.$index, scope.row)">修改</el-button>
              <el-button size="mini" @click="del1(scope.$index, scope.row)">删除</el-button>
            </template>
          </el-table-column>
        </el-table>
      </el-tab-pane>
      <!-- tabs2:执行单位 ↑-->
      <!-- tabs3:信息化系统 ↓-->
      <el-tab-pane label="信息化系统" name="third">
        <div v-if="!NodeDisabled" class="add-box">
          <el-button size="mini" type="primary" @click="add1">添加</el-button>
        </div>
        <el-table :data="formData.skyBusiInforSystems" :header-cell-style="tableStyle" border style="width: 100%">
          <el-table-column prop="systemName" label="系统名称" align="center"></el-table-column>
          <el-table-column prop="execRole" label="执行角色" align="center"></el-table-column>
          <el-table-column v-if="!NodeDisabled" label="操作" align="center" min-width="150">
            <template slot-scope="scope">
              <el-button size="mini" type="primary" @click="up2(scope.$index, scope.row)">修改</el-button>
              <el-button size="mini" @click="del2(scope.$index, scope.row)">删除</el-button>
            </template>
          </el-table-column>
        </el-table>
      </el-tab-pane>
      <!-- tabs3:信息化系统 ↑-->
      <!-- tabs4:上游节点 ↓-->
      <el-tab-pane label="上游节点" name="fourth">
        <div v-if="!NodeDisabled" class="add-box">
          <el-button size="mini" type="primary" @click="add1">添加</el-button>
        </div>
        <el-table :data="formData.skyBusiUpstreamNodes" :header-cell-style="tableStyle" border style="width: 100%">
          <el-table-column prop="busiProceName" label="上游节点所属流程" align="center"></el-table-column>
          <el-table-column prop="parentNodeName" label="上游节点" align="center"></el-table-column>
          <el-table-column prop="accessParam" label="接入参数" align="center"></el-table-column>
          <el-table-column v-if="!NodeDisabled" label="操作" align="center" min-width="150">
            <template slot-scope="scope">
              <el-button size="mini" type="primary" @click="up3(scope.$index, scope.row)">修改</el-button>
              <el-button size="mini" @click="del3(scope.$index, scope.row)">删除</el-button>
            </template>
          </el-table-column>
        </el-table>
      </el-tab-pane>
      <!-- tabs4:上游节点 ↑-->
      <!-- tabs5:输出参数 ↓-->
      <el-tab-pane label="输出参数" name="fifth">
        <div v-if="!NodeDisabled" class="add-box">
          <el-button size="mini" type="primary" @click="add1">添加</el-button>
        </div>
        <el-table :data="formData.skyBusiOutputParams" :header-cell-style="tableStyle" border style="width: 100%">
          <el-table-column prop="paramTypeName" label="输出结果类型" align="center"></el-table-column>
          <el-table-column prop="systemName" label="所属系统" align="center"></el-table-column>
          <el-table-column prop="paramName" label="参数名称" align="center"></el-table-column>
          <el-table-column v-if="!NodeDisabled" label="操作" align="center" min-width="150">
            <template slot-scope="scope">
              <el-button size="mini" type="primary" @click="up4(scope.$index, scope.row)">修改</el-button>
              <el-button size="mini" @click="del4(scope.$index, scope.row)">删除</el-button>
            </template>
          </el-table-column>
        </el-table>
      </el-tab-pane>
      <!-- tabs5:输出参数 ↑-->
      <!-- tabs6:业务规则 ↓-->
      <el-tab-pane label="业务规则" name="sixth">
        <div v-if="!NodeDisabled" class="add-box">
          <el-button size="mini" type="primary" @click="add1">添加</el-button>
        </div>
        <el-table :data="formData.skyBusiRules" :header-cell-style="tableStyle" border style="width: 100%">
          <el-table-column prop="ruleType" label="规则类型" align="center"></el-table-column>
          <el-table-column prop="ruleSummary" label="规则概述" align="center"></el-table-column>
          <el-table-column prop="manageRule" label="治理规则" align="center"></el-table-column>
          <el-table-column v-if="!NodeDisabled" label="操作" align="center" min-width="150">
            <template slot-scope="scope">
              <el-button size="mini" type="primary" @click="up5(scope.$index, scope.row)">修改</el-button>
              <el-button size="mini" @click="del5(scope.$index, scope.row)">删除</el-button>
            </template>
          </el-table-column>
        </el-table>
      </el-tab-pane>
      <!-- tabs6:业务规则 ↑-->
    </el-tabs>
  </div>
</template>
<script>
// 引入树选择器组件
import Treeselect from "@riophae/vue-treeselect";
import "@riophae/vue-treeselect/dist/vue-treeselect.css";

import processManagementApi from "@/httpUtils/ExternalManagement/processManagement";
export default {
  name: "SearchNodeDetail",
  components: {
    Treeselect
  },
  props: {
    // 基本信息
    baseInfoData: {
      type: Object,
      default: () => {}
    },
    // 是否禁止点击
    NodeDisabled: {
      type: Boolean,
      default: () => false
    },
    // 操作类型 0：新增节点 1：修改节点 2：查看节点
    myNodeType: {
      type: Number,
      default: () => 0
    }
    // 标签树
    // queryLabelTree: {
    //   type: Array,
    //   default: () => []
    // }
  },
  data() {
    return {
      // 流程节点表单是否加载中
      loading: false,
      // 表格头部样式
      tableStyle: {
        color: "#606266",
        background: "#eef1f6"
      },
      // 流程节点表单
      formData: {
        // 基本信息
        skyBusiProceNodes: [
          {
            nodeName: "", // 节点名称
            nodeType: "", //  节点类型
            businessBoundary: "", // 业务边界
            label: [], // 标签
            secretLevel: "", // 业务密级
            busiProceId: "", // 流程ID
            versionId: "" // 版本ID
          }
        ],
        // 执行单位
        skyBusiExecDepartments: [
          // {
          //   unitName: "自然资源局12",
          //   execOffice: "办公室12"
          // },
          // {
          //   unitName: "自然资源局22",
          //   execOffice: "办公室22"
          // }
        ],
        // 信息化系统
        skyBusiInforSystems: [
          // {
          //   systemName: "系统A12",
          //   execRole: "超级管理12员"
          // },
          // {
          //   systemName: "系统A22",
          //   execRole: "超级管理员22"
          // }
        ],
        // 上游节点
        skyBusiUpstreamNodes: [
          // {
          //   parentNode: "设计初设12",
          //   accessParam: "初设专题图层21",
          //   busiProceName: "当前业务流程名"
          // },
          // {
          //   parentNode: "设计初设22",
          //   accessParam: "初设专题图层22",
          //   busiProceName: "当前业务流程22"
          // }
        ],
        // 输出参数
        skyBusiOutputParams: [
          // {
          //   paramType: "接口21", // 参数类型
          //   systemName: "系统A21", // 所属系统
          //   paramName: "地名21" // 参数名称
          // },
          // {
          //   paramType: "接口22",
          //   systemName: "系统A22",
          //   paramName: "地名22"
          // }
        ],
        // 业务规则
        skyBusiRules: [
          // {
          //   ruleType: "参数接入规则21", // 规则类型
          //   ruleSummary: "测试21", // 规则概述
          //   manageRule: "测试21" // 治理规则
          // },
          // {
          //   ruleType: "参数接入规则22",
          //   ruleSummary: "测试22",
          //   manageRule: "测试22"
          // }
        ]
      },
      activeName: "first", // 当前弹出层
      // 业务密级下拉列表
      Options1: [
        // { name: "机密" },
        // { name: "绝密" },
        // { name: "秘密" },
        // { name: "敏感" }
      ],
      // 节点类型
      Options2: [
        { name: "实体节点" },
        { name: "判断节点" },
        { name: "线下节点" }
      ],
      queryLabelTree: []
    };
  },
  created() {
    console.log(this.baseInfoData);
    console.log(this.NodeDisabled);
    this.formData.skyBusiProceNodes[0].busiProceId = this.baseInfoData.busiProceId;
    this.formData.skyBusiProceNodes[0].versionId = this.baseInfoData.versionId;
    this.GetLabelTree(); // 获取标签列表
    this.GetOptions1(); // 获取业务密级列表

    // TODO: DELETE
    let nodeId = 1000000246509144;
    // 修改或删除时查询节点信息
    // if (this.myNodeType == 1 || this.myNodeType == 2) {
    this.GetAllNodeInfo(nodeId); // 获取节点有信息
    // }
  },
  filters: {
    // 过滤Null
    FormatNull(value) {
      console.log(value);
      if (value == null || value == "null") {
        return "";
      } else {
        return value;
      }
    }
  },
  methods: {
    // 发送code给父组件
    SendForm() {
      this.loading = true;
      console.log(this.baseInfoData);
      console.log(this.formData);

      let formatObj = JSON.parse(JSON.stringify(this.formData));
      let label = formatObj.skyBusiProceNodes[0].label;
      if (label != null && label != "") {
        formatObj.skyBusiProceNodes[0].label = label.join(",");
      } else {
        formatObj.skyBusiProceNodes[0].label = "";
      }
      console.log(this.formData.skyBusiProceNodes[0].label);
      console.log(formatObj.skyBusiProceNodes[0].label);
      processManagementApi.addBusiProceNode(formatObj).then(res => {
        console.log("添加流程节点", res.data);
        if (res.data.code == 200) {
          this.$message.success("添加流程节点成功");
          this.loading = false;
          this.$emit("func", res.data.code);
          // this.GetNode();
        } else {
          this.$message.error("添加流程节点失败");
          this.loading = false;
          this.$emit("func", res.data.code);
        }
        // this.showDialog = false; // 关闭流程节点弹出层
      });
    },
    // 标签配置
    _normalizer(node) {
      return {
        id: node.id,
        label: node.name,
        children: node.child
      };
    },
    // 获取标签列表
    GetLabelTree() {
      processManagementApi.queryLabelTree().then(res => {
        // console.log(res.data.data);
        this.IterationDelateMenuChildren(res.data.data);
        this.queryLabelTree = res.data.data;
      });
    },
    // 获取业务密级列表
    GetOptions1() {
      processManagementApi
        .queryDictInfoByType({
          typeCode: "1000001020219608"
        })
        .then(res => {
          console.log(" 获取业务密级下拉列表数据", res.data.data);
          this.Options1 = res.data.data;
        });
    },

    // -- 执行单位添加
    add1() {
      this.showDialog1 = true;
      this.GetAoptions();
    },
    // -- 信息化系统添加
    add2() {
      this.showDialog2 = true;
      this.GetBoptions();
    },
    // -- 上游节点添加
    add3() {
      this.showDialog3 = true;
      console.log(this.formData.skyBusiProceNodes[0].busiProceId);
      this.templateJson3.busiProceId = this.baseInfoData.busiProceId; // 所属流程的ID
      this.templateJson3.busiProceName = this.baseInfoData.busiProceName; // 所属流程的ID

      // this.GetCoptions(); // 获取上游节点所属流程下拉列表
      this.GetCoptions2(); // 获取上游节点下拉列表
    },

    // 获取节点有信息
    GetAllNodeInfo(nodeId) {
      this.GetInfoData(nodeId); // 获取节点基本信息
      this.GetskyBusiExecDepartments(nodeId); // 获取执行单位数据
      this.GetBusinessInfoSystem(nodeId); // 获取信息化系统
      this.BusinessUpstreamNode(nodeId); // 获取上游节点
      this.BusinessOutputParam(nodeId); // 获取输出参数
      this.BusinessRule(nodeId); // 获取业务规则
    },
    // select1 ： 获取节点[基本信息]
    GetInfoData(nodeId) {
      processManagementApi.findNodeDetail({ nodeId: nodeId }).then(res => {
        console.log("基本信息", res.data.data);
        if (res.data.data[0].label != "" && res.data.data[0].label != null) {
          res.data.data[0].label = res.data.data[0].label.split(",");
        } else {
          res.data.data[0].label = "";
        }
        this.formData.skyBusiProceNodes = res.data.data;
        console.log(this.formData);
        this.loading = false;
      });
    },
    // select2 ： 获取节点[执行单位]数据
    GetskyBusiExecDepartments(nodeId) {
      processManagementApi.findExecDepartment({ nodeId: nodeId }).then(res => {
        console.log("获取执行单位数据", res.data.data);
        this.formData.skyBusiExecDepartments = res.data.data;
      });
    },
    // select3 ： 获取节点[信息化系统]数据
    GetBusinessInfoSystem(nodeId) {
      processManagementApi.findInfoSystem({ nodeId: nodeId }).then(res => {
        console.log("获取信息化系统", res.data.data);
        this.formData.skyBusiInforSystems = res.data.data;
      });
    },
    // select4 ： 获取节点[上游节点]数据
    BusinessUpstreamNode(nodeId) {
      processManagementApi.findUpstreamNode({ nodeId: nodeId }).then(res => {
        console.log("获取上游节点", res.data.data);
        this.formData.skyBusiUpstreamNodes = res.data.data;
      });
    },
    // select5 ： 获取节点[输出参数]数据
    BusinessOutputParam(nodeId) {
      processManagementApi.findOutputParam({ nodeId: nodeId }).then(res => {
        console.log("获取输出参数", res.data.data);
        this.formData.skyBusiOutputParams = res.data.data;
      });
    },
    // select6 ： 获取[业务规则]数据
    BusinessRule(nodeId) {
      processManagementApi.findRule({ nodeId: nodeId }).then(res => {
        console.log("获取业务规则", res.data.data);
        this.formData.skyBusiRules = res.data.data;
      });
    },

    // ----------------------------------------------------------------------------------------------------------------------
    // 获取父流程下拉列表数据
    GetOptions() {
      let params = {
        busiProceName: "" // 关键词搜索
      };
      processManagementApi.queryBusiProce(params).then(res => {
        console.log(" 获取父流程下拉列表数据", res.data.data);
        if (this.type == 1) {
          // 修改时过滤自身流程
          let filterData = res.data.data.list.filter(item => {
            return item.busiProceId != this.baseInfoData.busiProceId;
          });
          console.log(filterData);
          res.data.data.list = filterData;
        }
        this.fatherFlowOptions = res.data.data.list;
      });
      console.log(this.baseInfoData);
      console.log(this.baseInfoData.parentId);
    },
    // 获取父节点下拉列表数据
    GetFatherProcess(versionId) {
      console.log("versionId", versionId);
      let params = {
        versionId: versionId
      };
      processManagementApi.findBusiNodeByVersionId(params).then(res => {
        console.log(" 获取父节点下拉列表数据", res.data.data.list);
        this.fatherNodeOptions = res.data.data.list;
      });
    },
    // 改变父节流程时,联动获取父流程对应的父节点下拉列表数据
    ChangeFatherProcess(busiProceId) {
      if (busiProceId) {
        console.log("busiProceId", busiProceId);
        this.baseInfoData.parentNode = "";
        let obj = this.fatherFlowOptions.find(item => {
          return item.busiProceId == busiProceId;
        });
        let versionId = obj.versionId;
        this.GetFatherProcess(versionId);
      }
    },
    // 获取标签列表
    GetLabelTree() {
      processManagementApi.queryLabelTree().then(res => {
        // console.log(res.data.data);
        this.IterationDelateMenuChildren(res.data.data);
        this.queryLabelTree = res.data.data;
      });
    },
    // 获取流程基本信息
    GetBaseInfo(versionId) {
      console.log("versionId", versionId);
      processManagementApi
        .findBusiProceById({
          versionId: versionId
        })
        .then(res => {
          console.log(res);
          console.log(" 获取流程基本信息", res.data.data[0]);
          this.baseInfoData = res.data.data[0];
          if (res.data.data[0].label) {
            res.data.data[0].label = res.data.data[0].label.split(",");
          } else {
            res.data.data[0].label = [];
          }
          // 若有父流程时获取父节点下拉列表
          if (this.baseInfoData.parentId) {
            this.GetFatherProcess(this.baseInfoData.versionId); // 请求父节点下拉列表
          }
        });
    },
    // 获取流程节点列表
    GetNode(versionId) {
      processManagementApi
        .findBusiNodeByVersionId({ versionId: versionId })
        .then(res => {
          console.log("流程节点", res.data.data);
          this.NodeForm = res.data.data.list;
        });
    },

    // 点击修改流程基本信息
    AddProcess() {
      this.baseInfoLoading = true;
      if (this.baseInfoData.busiProceName) {
        // 更改标签数据格式
        let obj = Object.assign({}, this.baseInfoData);
        console.log(obj);
        if (obj.label != null && obj.label != "") {
          obj.label = obj.label.join(",");
        } else {
          obj.label = "";
        }
        console.log(obj);
        processManagementApi.addBusiProce(obj).then(res => {
          console.log("添加流程", res.data);
          if (res.data.code == 200) {
            this.baseInfoLoading = false;
            this.$message.success("添加流程基本信息成功");
            console.log("?????????????", res.data.data);
            console.log("?????????????", res.data.data.versionId);
            this.type = 1;
            this.$router.push({
              path: `/${_routerPath.routerName}/ProcessManagementHost/Detail`,
              query: {
                busiProceId: res.data.data.busiProceId,
                versionId: res.data.data.versionId,
                type: 1
              }
            });
            // this.GetBaseInfo(res.data.data.versionId); // 刷新基本信息
            // this.disabled = true;
            // this.tpye = 1;
          } else {
            this.baseInfoLoading = false;
            this.$message.error(`添加流程基本信息流程失败`);
          }
        });
      } else {
        this.$message({
          message: "请输入流程名称",
          type: "error"
        });
        this.baseInfoLoading = false;
      }
    },
    // 点击修改流程基本信息
    UpdateProcess() {
      this.baseInfoLoading = true;
      if (this.baseInfoData.busiProceName) {
        // 更改标签数据格式
        let obj = Object.assign({}, this.baseInfoData);
        console.log(obj);
        if (obj.label != null && obj.label != "") {
          obj.label = obj.label.join(",");
        } else {
          obj.label = "";
        }
        console.log(obj);
        processManagementApi.updateBusiProce(obj).then(res => {
          console.log("修改流程数据", res.data);
          if (res.data.code == 200) {
            this.baseInfoLoading = false;
            this.$message.success("修改流程基本信息成功");
            this.GetBaseInfo(this.baseInfoData.versionId); // 刷新基本信息
          } else {
            this.baseInfoLoading = false;
            this.$message.error(`修改流程基本信息流程失败`);
          }
        });
      } else {
        this.$message({
          message: "请输入流程名称",
          type: "error"
        });
        this.baseInfoLoading = false;
      }
    },
    // 添加流程节点
    ClickAddNode() {
      this.showdialog = true;
    },

    // 获取节点信息
    GetNodeInfo(data) {
      let versionId = data.versionId;
      let nodeId = data.nodeId;
      this.GetBaseInfo(versionId); // 获取流程基本信息
      this.GetInfoData(nodeId); // 获取节点基本信息
      this.GetskyBusiExecDepartments(nodeId); // 获取执行单位数据
      this.GetBusinessInfoSystem(nodeId); // 获取信息化系统
      this.BusinessUpstreamNode(nodeId); // 获取上游节点
      this.BusinessOutputParam(nodeId); // 获取输出参数
      this.BusinessRule(nodeId); // 获取业务规则
      this.GetOptions1();
    },
    // --点击[返回]
    back() {
      this.$router.go(-1);
    }
  }
};
</script>
<style lang="less" scoped>
.el-tabs {
  overflow: visible !important;
}
/deep/.el-tabs__content {
  overflow: visible !important;
}
@import url("../ProcessManagement.less");
</style>